<template>
	<view>
		<view class="page-container">
			<!-- 底层图片：对应图三的“组5@2x.png” -->
			<image src="/pages/Car/static/图层1@2x.png" class="bg-image" mode="widthFix" />

			<!-- 上层内容：领券中心标题栏 + 优惠券列表 -->
			<view class="top-content">
				<view class="navigator">领券中心</view>
				<view class="tab-bar">
					<view class="tab-item">待使用</view>
					<view class="tab-item">已使用</view>
					<view class="tab-item active">已过期</view>
				</view>
				<view class="carView">

					<!-- 优惠券列表 -->
					<view class="coupon-list">
						<!-- 优惠券卡片1 -->
						<view class="coupon-card">
							<image class="coupon-bg" src="/pages/priceP/static/椭圆4拷贝@2x.png" mode="aspectFill"></image>
							<view class="coupon-content">
								<view class="coupon-amount">¥20</view>
								<view class="coupon-info">
									<view class="coupon-scope">仅限于XX加油站使用</view>
									<view class="coupon-condition">满200元可用</view>
									<view class="coupon-time">有效期至：2020.04.11—2023.05.11</view>
									<button class="coupon-btn">已过期</button>
								</view>
							</view>
						</view>

						<!-- 优惠券卡片2 -->
						<view class="coupon-card">
							<image class="coupon-bg" src="/pages/priceP/static/椭圆4拷贝@2x.png" mode="aspectFill"></image>
							<view class="coupon-content">
								<view class="coupon-amount">¥20</view>
								<view class="coupon-info">
									<view class="coupon-scope">仅限于XX加油站使用</view>
									<view class="coupon-condition">满200元可用</view>
									<view class="coupon-time">有效期至：2020.04.11—2023.05.11</view>
									<button class="coupon-btn">已过期</button>
								</view>
							</view>
						</view>

						<!-- 优惠券卡片3 -->
						<view class="coupon-card">
							<image class="coupon-bg" src="/pages/priceP/static/椭圆4拷贝@2x.png" mode="aspectFill"></image>
							<view class="coupon-content">
								<view class="coupon-amount">¥20</view>
								<view class="coupon-info">
									<view class="coupon-scope">仅限于XX加油站使用</view>
									<view class="coupon-condition">满200元可用</view>
									<view class="coupon-time">有效期至：2020.04.11—2023.05.11</view>
									<button class="coupon-btn">已过期</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 无逻辑代码，保持空即可
</script>

<style>
	/* 父容器：约束子元素定位范围 */
	.page-container {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	/* 底层图片：层级最低，作为背景 */
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
	}

	/* 上层内容：层级高于背景图，承载文字和按钮 */
	.top-content {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
	}

	.navigator {
		display: flex;
		justify-content: center;
		color: white;
		margin-bottom: 40rpx;
	}

	.carView {
		height: 100%;
		background-color: #fff;
		margin: 50rpx 40rpx;
		border-radius: 20rpx;
		padding: 10rpx 40rpx;
	}

	.tab-bar {
		display: flex;
		color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
	}

	.tab-item.active {
		font-weight: bold;
			/* 白色下划线样式 */
		border-bottom: 3rpx solid #fff;
		color: #fff;
		font-weight: bold;
	}

	.coupon-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.coupon-card {
		position: relative;
		width: 100%;
		height: 180rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.coupon-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.coupon-content {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 30rpx;
	}

	.coupon-amount {
		color: #fff;
		font-size: 48rpx;
		font-weight: bold;
		margin-right: 20rpx;
		text-decoration: line-through; /* 中划线 */
	}

	.coupon-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.coupon-scope {
		font-size: 20rpx;
		color: #fff;
		margin-bottom: 8rpx;
	}

	.coupon-condition {
		font-size: 24rpx;
		color: #fff;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.coupon-time {
		font-size: 24rpx;
		color: #fff;
		margin-bottom: 10rpx;
	}

	.coupon-btn {
		align-self: flex-end;
		background-color: #fff;
		color: #ff7d4e;
		border-radius: 30rpx;
		padding: 0 24rpx;
		font-size: 24rpx;
		height: 40rpx;
		line-height: 40rpx;
	}
</style>